<template>
  <el-drawer :model-value="visible" title="水电记录" :size="mobile ? '100%' : 380" append-to-body lock-scroll @close="handleClose">
    <div class="primary-section">
      <span class="mr20">总用电<span class="ml10 font-w font-medium">281.5度</span></span>
      <span>剩余电量<span class="ml10 font-w font-medium">18.5度</span></span>
    </div>
    <div class="primary-section">
      <span class="mr20">总用水<span class="ml10 font-w font-medium">11.5吨</span></span>
      <span>剩余水量<span class="ml10 font-w font-medium">0.5度</span></span>
    </div>
    <el-tabs v-model="activeName" class="utility-tabs" @tab-click="handleClick">
      <el-tab-pane label="用电记录" name="kwh">
        <el-space wrap alignment="center" size="small" style="width: 100%;justify-content: center;margin-bottom: 0;">
          <el-icon size="20px" class="picker-operate" @click="handlePreDate"><CaretLeft /></el-icon>
          <el-date-picker
            v-model="date"
            type="month"
            value-format="YYYY-MM"
            placeholder="请选择月份"
            :clearable="false"
            @change="handlePickerChange" />
          <el-icon size="20px" class="picker-operate" @click="handleNextDate"><CaretRight /></el-icon>
        </el-space>
        <div v-loading="loading">
          <template v-if="list.length > 0">
            <div class="primary-section" v-for="item in list" :key="item.lockId">
              <el-row align="middle">
                <el-col :span="16">
                  <div class="font-w">房间电表：{{ item.number }}</div>
                  <div class="mt10" style="color: var(--el-text-color-secondary);">{{ parseTime(item.updateDate) }}</div>
                </el-col>
                <div style="margin-left: auto;" class="font-w">{{ item.usedKwh }}度</div>
              </el-row>
            </div>
          </template>
          <el-empty v-else description="暂无记录" />
        </div>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          layout="prev, pager, next,"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="用水记录" name="water">Config</el-tab-pane>
    </el-tabs>
    
  </el-drawer>
</template>
<script setup name="BatchLock">
import { Search } from '@element-plus/icons-vue'
import useAppStore from '@/store/modules/app'

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const loading = ref(false)
const list = ref([])
const activeName = ref('kwh')
const date = ref('2023-12')
const total = ref(0)
const mobile = computed(() => useAppStore().device === 'mobile')
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  }
})

const { queryParams } = toRefs(data)

watch(() => props.visible, (value) => {
  if (value) {
    list.value = []
  }
})

// 关联公区锁
function handleAddLock(lockId) {
  console.log('关联公区锁id:>>>', lockId);
}

function handleClose() {
  emit('cancel')
}

function handleClick() {
  if (activeName.value === 'kwh') {
    getList()
  }
}

// 日期控件发生变化
function handlePickerChange(value) {
  console.log(value)
  getList()
}

// 上一个月
function handlePreDate() {
  let year = new Date(date.value).getFullYear()
  let month = new Date(date.value).getMonth()
  if (month === 0) {
    month = 12
    year -= 1
  }
  date.value = `${year}-${month < 10 ? '0' : ''}${month}`
  getList()
}
// 下一个月
function handleNextDate() {
  let year = new Date(date.value).getFullYear()
  let month = new Date(date.value).getMonth() + 2
  if (month === 13) {
    month = 1
    year += 1
  }
  date.value = `${year}-${month < 10 ? '0' : ''}${month}`
  getList()
}

function getList() {
  loading.value = true
  setTimeout(() => {
    list.value = [{
      recordId: 686545,
      relationType: "110701",
      number: "201100000733",
      updateDate: 1703515135000,
      usedKwh: 1.1
    }, {
      recordId: 683867,
      relationType: "110701",
      number: "201100000733",
      updateDate: 1703432457000,
      usedKwh: 1
    }, {
      recordId: 678613,
      relationType: "110701",
      number: "201100000733",
      updateDate: 1703344605000,
      usedKwh: 0.9
    }]
    total.value = 100
    loading.value = false
  }, 500)
}
// getList()
</script>
<style lang="scss" scoped>
.utility-tabs {
  :deep(.el-date-editor) {
    width: 80px;
    .el-input__wrapper {
      box-shadow: unset;
    }
    .el-input__inner {
      text-align: center;
    }
    .el-input__prefix {
      display: none;
    }
  }
  .picker-operate {
    cursor: pointer;
    color: var(--el-color-primary-light-3);
    transition: color .3s;
    &:hover {
      color: var(--el-color-primary-light-6);
    }
  }
}
</style>